<template>
  <div class="items">
    <el-row>
      <el-col :span="2">
        <el-select v-model="type" placeholder="请选择">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="活动下单" :value="1"></el-option>
          <el-option label="活动退款" :value="2"></el-option>
          <el-option label="商城下单" :value="3"></el-option>
          <el-option label="商城退款" :value="4"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="margin-left: 1rem">
        <el-input placeholder="搜索" v-model.trim="search.value">
          <el-select v-model.trim="search.type" slot="prepend" style="width: 150px">
            <el-option label="请选择" :value="0"></el-option>
            <el-option label="用户名" :value="1"></el-option>
            <el-option label="用户昵称" :value="2"></el-option>
            <el-option label="用户手机号码" :value="3"></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-close"
            @click="clearSearch"
            v-if="search.type && search.value"></el-button>
          <el-button slot="append" icon="el-icon-search" @click="searchAction">搜索</el-button>
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-date-picker
          style="margin-left: 1rem"
          v-model="date"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="datePicker">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-table
    v-loading="loading"
    :data="items"
    style="width: 100%;margin-top: 1rem">
      <el-table-column
        width="100px"
        label="用户名">
        <template slot-scope="scope">
          {{scope.row.member.username}}
        </template>
      </el-table-column>
      <el-table-column
        width="100px"
        label="用户昵称">
        <template slot-scope="scope">
          {{scope.row.member.nickname}}
        </template>
      </el-table-column>
      <el-table-column
        width="100px"
        label="类型">
        <template slot-scope="scope">
          <template v-if="inArray(scope.row.type, [1,3])">
            <span style="color: green">{{typeText[scope.row.type]}}</span>
          </template>
          <template v-if="inArray(scope.row.type, [2,4])">
            <span style="color: red">{{typeText[scope.row.type]}}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号">
        <template slot-scope="scope">
          {{scope.row.order_no}}
        </template>
      </el-table-column>
      <el-table-column
      label="描述">
        <template slot-scope="scope">
          {{scope.row.descriptions}}
        </template>
      </el-table-column>
      <el-table-column
        width="100px"
        label="额度">
        <template slot-scope="scope">
          <template v-if="inArray(scope.row.type, [1,3])">
            <span style="color: green">{{(Number(scope.row.quota) / 100).toFixed(2)}}</span>
          </template>
          <template v-if="inArray(scope.row.type, [2,4])">
            <span style="color: red">{{(Number(scope.row.quota) / 100).toFixed(2)}}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
      label="时间">
        <template slot-scope="scope">
          {{scope.row.create_date}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import config from '@config'
export default {
  data () {
    return {
      imageUrl: config.imageUrl,
      loading: false,
      page: 1,
      size: 20,
      type: 0,
      start: '',
      end: '',
      total: 0,
      items: [],
      typeText: {
        1: '活动下单',
        2: '活动退款',
        3: '商城下单',
        4: '商城退款'
      },
      search: {
        type: 0,
        value: ''
      },
      datePicker: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      date: ''
    }
  },
  watch: {
    $route (route) {
      if (route.params.page) {
        this.page = Number(route.params.page)
      }
      this.getItems()
    },
    date (val) {
      this.start = val[0] + ' 00:00:00'
      this.end = val[1] + ' 23:59:59'
      this.page = 1
      this.getItems()
    },
    type () {
      this.page = 1
      this.getItems()
    }
  },
  methods: {
    clearSearch () {
      this.search = {
        type: 0,
        value: ''
      }
      this.page = 1
      this.getItems()
    },
    /**
     *  搜索
     */
    searchAction () {
      switch (this.search.type) {
        case 0:
          this.toast('请选择搜索类型', 'warning')
          return false
        case 1:
          if (!this.search.value) {
            this.toast('请输入要搜索的用户登录名', 'warning')
            return false
          }
          break
        case 2:
          if (!this.search.value) {
            this.toast('请输入要搜索的用户昵称', 'warning')
            return false
          }
          break
        case 3:
          if (!this.search.value) {
            this.toast('请输入用户手机号码', 'warning')
            return false
          }
          break
      }
      this.page = 1
      this.getItems()
    },
    /**
     *  翻页回调
     */
    currentPage (page) {
      this.jump({
        name: 'financial.member.items',
        params: {
          page: page
        }
      })
    },
    /**
     * @purpose 获取账单列表
     */
    getItems () {
      this.loading = true
      this
        .$api
        .financial
        .billItems({
          page: this.page,
          size: this.size,
          type: this.type,
          start: this.start,
          end: this.end,
          searchType: this.search.type,
          searchValue: this.search.value
        })
        .then(r => {
          this.loading = false
          this.total = r.total
          this.items = r.list
        })
        .catch(e => {
          this.loading = false
        })
    }
  },
  created () {
    if (this.$route.params.page) {
      this.page = Number(this.$route.params.page)
    }
    this.getItems()
  }
}
</script>
<style scoped lang="sass">
  .items
    width: 100%
    min-height: 100%
    .el-pagination
      padding: 2px 0 !important
</style>
